<script>
import {User} from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus';
import axios from "axios";

export default {
  components: {User},
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      queryFrm: {
        School_degree: ''
      },
      tableData: []
    };
  },
  methods: {
    onSubmit() {
      this.LoadUsersData();
    },
    btnShowUpdate(scope) {
      console.log('点击了注销按钮，当前行数据:', scope.row);
    },
    LoadUsersData() {
      const vm = this;
      vm.$http.get("http://localhost:8080/query/users", {
        params: {
          School_degree: vm.queryFrm.School_degree,
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
          .then((res) => {
            vm.tableData = res.data;
            console.log(vm.tableData);
          })
          .catch((err) => {
            console.log(err);
          });
    },
    freezeUser(school_degree) {
      console.log(school_degree)
      const vm = this;
      axios.post('http://localhost:8080/query/change1', {
        School_degree: school_degree,
        // 假设userInfo对象还有其它字段，你需要根据实际情况添加它们
      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
          .then(response => {
            // 请求成功，获取后端返回的状态码
            const statusCode = response.data;
            if(statusCode === 1) { // 假设1表示操作成功
              ElMessage.success('用户冻结成功');
              vm.LoadUsersData(); // 刷新用户列表数据
            } else {
              // 其他状态码表示操作失败
              ElMessage.error('用户冻结失败：状态码 ' + statusCode);
            }
          })
          .catch(error => {
            // 请求失败
            let errorMessage = '用户冻结请求失败';
            if (error.response) {
              // 服务器响应了，但是状态码不在2xx范围内
              errorMessage += `：状态码 ${error.response.status}`;
            } else if (error.request) {
              // 客户端尝试发送请求，但没收到响应
              errorMessage += '：请求发出但无响应';
            } else {
              // 发生了触发请求错误的问题
              errorMessage += `：${error.message}`;
            }
            ElMessage.error(errorMessage);
            console.error(error);
          });
    },


    unfreezeUser(school_degree) {
      console.log(school_degree);
      const vm = this;
      axios.post('http://localhost:8080/query/change2', {
        School_degree: school_degree,
        Login_1: 1 // 发送Login_1的值为1
      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 注意这里我们使用JSON格式发送数据
        }
      })
          .then(response => {
            const statusCode = response.data;
            if(statusCode === 1) {
              ElMessage.success('用户取消冻结成功');
              vm.LoadUsersData(); // 刷新用户列表数据
            } else {
              ElMessage.error('用户取消冻结失败：状态码 ' + statusCode);
            }
          })
          .catch(error => {
            let errorMessage = '用户取消冻结请求失败';
            if (error.response) {
              // 服务器响应了，但是状态码不在2xx范围内
              errorMessage += `：状态码 ${error.response.status}`;
            } else if (error.request) {
              // 客户端尝试发送请求，但没收到响应
              errorMessage += '：请求发出但无响应';
            } else {
              // 发生了触发请求错误的问题
              errorMessage += `：${error.message}`;
            }
            ElMessage.error(errorMessage);
            console.error(error);
          });
    },


// 其他方法保持不变...
    LoadtableData() {
      const vm = this;
      vm.$http.get("http://localhost:8080/query/user", {
        params: {
          School_degree: vm.queryFrm.School_degree
        }
      }).then((res) => {
        vm.tableData = res.data;
        console.log(vm.tableData);
      }).catch((err) => {
        console.error('请求数据失败:', err);
      });
    },
    formatImagePath(imagePath) {
      return imagePath;
    },
    LoadStuPageData() {
      const vm = this;
      vm.$http.get("http://localhost:8080/query/page", {
        params: {
          page: vm.currentPage,
          size: vm.pageSize
        }
      }).then((res) => {
        vm.pageInfo = res.data;
        vm.tableData = res.data.list;
        vm.pageInfo.total = res.data.total;
        console.log(vm.tableData);
      }).catch((err) => {
        console.log(err);
      });
    },
    handleCurrentChange(currentPage) {
      const vm = this;
      vm.currentPage = currentPage;
      vm.LoadStuPageData();
    },
    handleSizeChange(pageSize) {
      const vm = this;
      vm.pageSize = pageSize;
      vm.currentPage = 1;
      vm.LoadStuPageData();
    },
  },
  mounted() {
    this.LoadStuPageData();
    this.LoadtableData();
  }
};
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <el-icon>
            <User/>
          </el-icon>
          <span>用户管理</span>
        </div>
        <div class="header-right">
          <el-form :inline="true" :model="queryFrm" class="demo-form-inline">
            <el-form-item label="学号">
              <el-input v-model="queryFrm.School_degree" placeholder="请输入学号" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="80">
        <template #default="{row, $index}">
          <span>{{(currentPage - 1) * pageSize + $index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像图片">
        <template #default="scope">
          <img :src="formatImagePath(scope.row.aureole)" class="product-image" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="120" />
      <el-table-column prop="nick_name" label="昵称" width="100" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="school_degree" label="学号" width="150" />
      <el-table-column prop="reputation" label="累计信誉分" width="120" />
      <el-table-column prop="activity" label="活跃指数" width="120" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="warning" size="small" @click="freezeUser(scope.row.school_degree)">
            冻结
          </el-button>
          <el-button type="primary" size="small" @click="unfreezeUser(scope.row.school_degree)">
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 4, 5, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>